@charset "utf-8";

@function px($px){
    @return  ($px/2);
}
$fontsize:40;
@function r($px){
    @return $px/$fontsize * 1rem;
}

.web{
    width: 100%;
    height: 100%;
    background: #f3f4f6;
    position: relative;
    section{
        width: 100%;
         position: absolute;
         top: r(0);
         overflow: scroll;
         -webkit-overflow-scrolling: touch;
         .secBox{
             width: 100%;
             height: 100%;
             .secBox1{
                 width: 100%;
                 height: r(82);
                 background: white;
                 margin-bottom: 2px;
                 ul{
                     width: r(435);
                     height: 100%;
                     margin: 0 auto;
                     li{
                         float: left;
                         width: r(108);
                         height: 100%;
                         text-align: center;
                         line-height: r(82);
                         margin-right: r(55);
                         color: #adadad;
                         &.secBox1-2{
                             color: #D62D31;
                             border-bottom: 2px solid #D62D31;
                         }
                     }
                     .secBox1-1{
                         margin-right: 0;
                     }
                     a li:hover{
                         border-bottom: 2px solid #d62d31;
                         color: #d62d31;
                         font-size: r(28);
                     }
                 }
             }//secBox1
             .secBox2{
                 width: 100%;
                 height: r(336);
                 img{
                     width: 100%;
                     height: 100%;
                     border-top: 2px solid #e3e3e3;
                     border-bottom: 2px solid #e3e3e3;
                 }
             }//secBox2
             .secBox3{
                 width: 100%;
                 height: r(105);
                 ul{
                     li{
                         width: 50%;
                         height: r(140);
                         background: #FFFFFF;
                         font-size: r(50);
                         text-align: center;
                         padding-top: r(35);
                     }
                     .secBox3-1{
                         .secBox3-1_1{
                             margin: 0 auto;
                             height: r(40);
                             margin-top: r(20);
                             
                             h1{
                                 width: r(20);
                                 height: r(20);
                                 background: #D62D31;
                                 border-radius: 50%;
                                 float: left;
                                 margin-left: r(108);
                                 
                             }
                             span{
                                 font-size: r(30);
                                 float: left;
                                 text-align: center;
                                 margin-left: r(20);
                                 line-height: r(20);
                             }
                         }
                     }
                     .secBox3-2{
                         .secBox3-1_1{
                             margin: 0 auto;
                             height: r(40);
                             margin-top: r(20);
                             
                             h1{
                                 width: r(20);
                                 height: r(20);
                                 background: #00a0e3;
                                 border-radius: 50%;
                                 float: left;
                                 margin-left: r(108);
                                 
                             }
                             span{
                                 font-size: r(30);
                                 float: left;
                                 text-align: center;
                                 margin-left: r(20);
                                 line-height: r(20);
                             }
                         }
                     }
                 }
             }//secBox3
             .secBox4{
                 width: 100%;
                 height: r(90);
                 margin-top: r(30);
                 background: white;
                 border-bottom:2px solid #E3E3E3 ;
                 h3{
                     float: left;
                     font-size: r(35);
                     color: #D62D31;
                     line-height: r(90);
                     margin-left: r(30);
                 }
                 p{
                     float: right;
                     font-size: r(30);
                     line-height: r(90);
                     color: #d3d3d3;
                     margin-right: r(20);
                 }
             }//secBox4
             .secBox5{
                 width: 100%;
                 height: r(140);
                 background: #FFFFFF;
                 .secBox5-1{
                     width: 7%;
                     height: r(140);
                     p{  width: 100%;
                         height: 100%;
                         line-height: r(140);
                         text-align: right;
                     }
                 }
                 .secBox5-2{
                     width: 85%;
                     height: 100%;
                     border-bottom: 2px solid #e3e3e3;
                     h3{
                         font-size: r(35);
                         margin-top: r(20);
                         
                     }
                     p{
                         font-size: r(30);
                         margin-top: r(10);
                         color: #ADADAD;
                     }
                 }
             }
         }//secBox
    }//section
}//web
